<template>
    <div class="control-container">
    <top-tab-bar ref="top-tab-bar"
                 :tab-titles="tabTitles"
                 :tab-styles="tabStyles"
                 title-type="icon"
                 :tab-page-height="100"
                 @wxcTabBarCurrentTabSelected="wxcTabPageCurrentTabSelected">
    </top-tab-bar>
    </div>
</template>

<script>
  import Config from '../../config/HomeTabConfig'
  import TopTabBar from './TopTabBar.vue'
  export default {
    props: {
      itemValue: {
        type: Object, default: () => {
          return {ex: {}}
        },
      },
      onItemClick: {type: Function},
    },
    data: () => ({
      tabTitles: [
        {
          title: '全部订单',
        },
        {
          title: '等待付款',
        },
        {
          title: '已付订单',
        },
      ],
      tabStyles: Config.tabStyles,
      listStatus: '',
    }),
    components: {TopTabBar},
    methods: {
      imgClick () {
        this.onItemClick && this.onItemClick(11)
      },
      wxcTabPageCurrentTabSelected (e) {
        switch (e.page) {
          case 0:
            this.listStatus = ''
            break
          case 1:
            this.listStatus = 'unpaid'
            break
          case 2:
            this.listStatus = 'complete'
            break
        }
        this.onItemClick && this.onItemClick(this.listStatus)
        // this.onRefresh()
      },
    },
    created () {
    },
  }
</script>

<style lang="scss">
    @import '../../config/styles.scss';
    .control-container {
        width: 750px;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    }
</style>
